<!DOCTYPE html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Dynamic scales</title>
	<script src="../../codebase/dhtmlxgantt.js?v=7.0.7"></script>
	<script src="../../codebase/locale/locale_cn.js"></script>
	<link rel="stylesheet" href="../../codebase/dhtmlxgantt.css?v=7.0.7">
	<link rel="stylesheet" href="../common/controls_styles.css?v=7.0.7">
	<link rel="stylesheet" href="../../bootstrap-4.5.0/css/bootstrap.min.css">
	
	<script src="../common/data_extra.js?v=7.0.7"></script>
	<script src="../../jquery/jquery-3.5.1.min.js"></script>
	<script src="../../bootstrap-4.5.0/js/bootstrap.min.js"></script>

	<style>
		html, body {
			height: 100%;
			padding: 0px;
			margin: 0px;
			overflow: hidden;
		}
		.deadline {
			position: absolute;
			border-radius: 12px;
			border: 2px solid #585858;
			-moz-box-sizing: border-box;
			box-sizing: border-box;

			width: 22px;
			height: 22px;
			margin-left: -11px;
			margin-top: 6px;
			z-index: 1;
			background: url("common/deadline_icon.png") center no-repeat;
		}

		.overdue-indicator {
			width: 16px;
			margin-top: 4px;
			height: 16px;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			border-radius: 12px;
			color: white;
			background: rgb(255, 60, 60);
			line-height: 17px;
			text-align: center;
			font-size: 16px;
		}
		
		.suspend-indicator {
			width: 16px;
			margin-top: 4px;
			height: 16px;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			border-radius: 12px;
			color: white;
			background: rgb(255,165,0);
			line-height: 17px;
			text-align: center;
			font-size: 16px;
		}
		
		.header_control{
			text-align: left;
			padding-left: 20px;
		}

		.add{
			background-image: url();
			width: 18px;
			cursor: pointer;
		}
	</style>
	
	<style id="css">
		
	</style>
</head>

<body>
	<div id="myCover">
		<div class="gantt_control header_control">
			<input type="text" id="order_number" >
			<label for="scale1">工单号</label>
			<input type="text" id="order_number" >
			<label for="scale1">工单状态</label>
			<input type="text" id="order_number" >
			<label for="scale1">排序方式</label>

			<input type="button" value="放大" onclick="zoomIn()">
			<input type="button" value="缩小" onclick="zoomOut()">
			<div style="display:none">
				<input type="radio" id="scale1" class="gantt_radio" name="scale" value="hour">
				<label for="scale1">小时模式</label>

				<input type="radio" id="scale2" class="gantt_radio" name="scale" value="day" checked>
				<label for="scale2">天模式</label>

				<input type="radio" id="scale3" class="gantt_radio" name="scale" value="week">
				<label for="scale3">周模式</label>

				<input type="radio" id="scale4" class="gantt_radio" name="scale" value="month">
				<label for="scale4">月模式</label>

				<input type="radio" id="scale5" class="gantt_radio" name="scale" value="quarter">
				<label for="scale5">季度模式</label>

				<input type="radio" id="scale6" class="gantt_radio" name="scale" value="year" >
				<label for="scale6">年模式</label>
			</div>
			<button id="toggle_fullscreen" onclick="gantt.ext.fullscreen.toggle();">全屏</button>
			
			<button id="toggle_fullscreen" onclick="gantt.ext.fullscreen.toggle();">重排程</button>

			<button id="toggle_fullscreen" onclick="submitTask()">下发任务</button>
			
			<button id="toggle_fullscreen" onclick="getTask()">加载数据</button>
			
			<button id="toggle_fullscreen" onclick="openGantt()">打开甘特图</button>

			<button id="toggle_fullscreen" onclick="closeGantt()">关闭甘特图</button>

			<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开模态框</button>
		</div>
		<div id="gantt_here" style='width:100%; height:calc(100vh - 52px);'></div>
	</div>
	
	<!-- 模态框 -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
   
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">模态框头部</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
   
        <!-- 模态框主体 -->
        <div class="modal-body">
          模态框内容..
        </div>
   
        <!-- 模态框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        </div>
   
      </div>
    </div>
  </div>
</body>
<script>
window.onload = function(){
	var oCss=document.getElementById("css");
 
	oCss.innerHTML+=".gantt_row.gantt_projecttest1,.gantt_row.odd.gantt_projecttest1{background-color: blue;}";
	oCss.innerHTML+=".gantt_task_row.gantt_projecttest1,.gantt_task_row.odd.gantt_projecttest1{background-color: #yellow;;}";
	oCss.innerHTML+=".gantt_task_line.gantt_projecttest1{background-color: blue;border: 1px solid yellow;}";
	oCss.innerHTML+=".gantt_task_line.gantt_projecttest1 .gantt_task_progress{background-color: yellow;}";
}

var demo_tasks = {
			"data": [{
				"id": 1,
				"text": "批次0001",
				"start_date": "2020-03-10 10:00:00",
				"end_date": "2020-03-14 13:00:00",
				"open": true,
				"isTask": false,
				"updateStyle": 1
			}, {
				"id": 2,
				"text": "清洗",
				"start_date": "2020-03-10 10:00:00",
				"end_date": "2020-03-11 10:00:00",
				"parent": "1",
				"progress": 1,
				"open": true,
				"usr_names": "John,Mike",
				"isTask": true,
				"framName": "机加车间1",
				"teamName": "黑猫",
				"device_nums":"TZ09",
				"updateStyle": 1
			}, {
				"id": 3,
				"text": "打磨",
				"start_date": "2020-03-11 13:00:00",
				"end_date": "2020-03-11 21:00:00",
				"parent": "1",
				"progress": 0.5,
				"open": true,
				"usr_names": "Anna",
				"isTask": true,
				"framName": "后处理车间1",
				"teamName": "打磨班组",
				"device_nums":"TZ19",
				"updateStyle": 1
			}, {
				"id": 4,
				"text": "染黄",
				"start_date": "2020-03-12 12:00:00",
				"end_date": "2020-03-14 13:00:00",
				"parent": "1",
				"progress": 0.8,
				"open": true,
				"usr_names": "Mike,Anna",
				"isTask": true,
				"framName": "化学清洗车间1",
				"teamName": "清洗班组",
				"device_nums":"TZ29",
				"updateStyle": 1
			}
			
			
			], "links": [
			{"source": "2", "target": "3", "type": "0"},
			{"source": "3", "target": "4", "type": "0"}
		]
		};
		
		
		demo_tasks = {
			"data": [{
				"id": 1,
				"text": "批次0001",
				"start_date": "2020-03-10 10:00:00",
				"end_date": "2020-03-14 13:00:00",
				"open": false,
				"isTask": false,
				"updateStyle": 1,
				"$has_child":1
			}]
		};
	var zoomConfig = {
		levels: [
			{
				name:"hour",
				scale_height: 50,
				min_column_width:50,
				scales:[
					{unit: "day", step: 1, format: "%m/%d"},
					{unit: "hour", step: 1, format: "%H:%i"}
				]
			},
			{
				name:"day",
				scale_height: 50,
				min_column_width:50,
				scales:[
					{unit: "day", step: 1, format: "%m/%d"}
				]
			},
			{
				name:"week",
				scale_height: 50,
				min_column_width:50,
				scales:[
					{unit: "week", step: 1, format: function (date) {
						
						var dateToStr = gantt.date.date_to_str("%m/%d");
						var endDate = gantt.date.add(date, + 6, "day");
					
						
						return dateToStr(date) + " - " + dateToStr(endDate);
					}},
					{unit: "day", step: 1, format: "%j %D"}
				]
			},
			{
				name:"month",
				scale_height: 50,
				min_column_width:120,
				scales:[
					{unit: "month", format: "%Y/%m"},
					{unit: "week", format: "第 %W 周"}
				]
			},
			{
				name:"quarter",
				height: 50,
				min_column_width:90,
				scales:[
					{unit: "month", step: 1, format: "%M"},
					{
						unit: "quarter", step: 1, format: function (date) {
							var dateToStr = gantt.date.date_to_str("%M");
							var endDate = gantt.date.add(gantt.date.add(date, 3, "month"), -1, "day");
							return dateToStr(date) + " - " + dateToStr(endDate);
						}
					}
				]
			},
			{
				name:"year",
				scale_height: 50,
				min_column_width: 30,
				scales:[
					{unit: "year", step: 1, format: "%Y"}
				]
			}
		]
	};

	gantt.config.date_format="%Y-%m-%d %H:%i:S%";




	//gantt.locale.labels.deadline_enable_button = 'Set';
	//gantt.locale.labels.deadline_disable_button = 'Remove';


	//全屏组件
	gantt.plugins({
		fullscreen: true
	});
	gantt.ext.fullscreen.getFullscreenElement = function() {
		return document.getElementById("myCover");
	}
	
	//时间线组件
	gantt.plugins({
		marker: true
	});
	

	var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
	var today = new Date("2020-07-30".replace(/-/g, "/"));

	gantt.addMarker({
		start_date: today,
		css: "today",
		text: "Today",
		title: "Today: " + dateToStr(today)
	});

	//放大缩小组件
	gantt.ext.zoom.init(zoomConfig);
	gantt.ext.zoom.setLevel("day");//设置默认显示
	gantt.ext.zoom.attachEvent("onAfterZoom", function(level, config){
		document.querySelector(".gantt_radio[value='" +config.name+ "']").checked = true;
	})
	
	gantt.config.columns = [
		{
			width: 22, template: function (obj) {
				if (obj.deadline) {
					return '<div class="overdue-indicator">!</div>';
				}else if (obj.suspend) {
					return '<div class="suspend-indicator">!</div>';
				}
				return '<div></div>';
			}
		},
		{name: "text", label: "Task name", width: "*", tree: true, resize: true},
		{name: "start_date", label: "Start time", align: "center", width: 80},
		//{name: "deadline", label: "Deadline", width: 80, align: "center"},
		{name: "duration", label: "Duration", align: "center", width: 60},
		{name: "add", label: "", width: 36}
	];
	
	//交期不满足组件
	/*gantt.config.lightbox.sections = [
		{name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
		{name: "time", map_to: "auto", type: "duration"},
		{
			name: "deadline", map_to: {start_date: "deadline"},
			type: "duration_optional",
			button: true,
			single_date: true
		}
	];

	gantt.config.columns = [
		{
			name: "overdue", label: "", width: 38, template: function (obj) {
				if (obj.deadline) {
					var deadline = gantt.date.parseDate(obj.deadline, "xml_date");
					if (deadline && obj.end_date > deadline) {
						return '<div class="overdue-indicator">!</div>';
					}
				}
				return '<div></div>';
			}
		},
		{name: "text", label: "Task name", width: "*", tree: true, resize: true},
		{name: "start_date", label: "Start time", align: "center", width: 80},
		{name: "deadline", label: "Deadline", width: 80, align: "center"},
		{name: "duration", label: "Duration", align: "center", width: 60},
		{name: "add", label: "", width: 36}
	];*/
	gantt.config.grid_width = 420;//设置左边的树宽度
	//gantt.locale.labels.section_deadline = "Deadline";

	/*gantt.addTaskLayer({
		renderer: {
			render: function draw_deadline(task) {
				if (task.deadline) {
					var el = document.createElement('div');
					el.className = 'deadline';
					var sizes = gantt.getTaskPosition(task, task.deadline);

					el.style.left = sizes.left + 'px';
					el.style.top = sizes.top + 'px';

					el.setAttribute('title', gantt.templates.task_date(task.deadline));
					return el;
				}
				return false;
			},
			// define getRectangle in order to hook layer with the smart rendering
			getRectangle: function(task, view){
				if(task.deadline){
					return gantt.getTaskPosition(task, task.deadline);
				}
				return null;
			}
		}
	});

	gantt.templates.task_class = function (start, end, task) {
		if (task.deadline && end.valueOf() > task.deadline.valueOf()) {
			return 'overdue';
		}
	};

	gantt.templates.rightside_text = function (start, end, task) {
		if (task.deadline) {
			if (end.valueOf() > task.deadline.valueOf()) {
				var overdue = Math.ceil(Math.abs((end.getTime() - task.deadline.getTime()) / (24 * 60 * 60 * 1000)));
				var text = "<b>Overdue: " + overdue + " days</b>";
				return text;
			}
		}
	};


	gantt.attachEvent("onTaskLoading", function (task) {
		if (task.deadline)
			task.deadline = gantt.date.parseDate(task.deadline, "xml_date");
		return true;
	});*/

	/*甘特条的背景色*/
	gantt.templates.task_class = function (st, end, item) {
		if(item.updateStyle == 1){
			return "gantt_projecttest1";
		}else{
			return "gantt_projecttest1";
		}
		
	};


	//甘特图全局设置
	gantt.config.row_height = 24;//设置甘特条高度
	gantt.config.scale_height = 30;//设置第一行时间轴的高度
	//gantt.config.preserve_scroll = true;
	//gantt.config.initial_scroll = false;
	//gantt.config.static_background = true;//处理较大的日期范围
	//gantt.config.smart_rendering = true;//开启智能渲染


		




	//gantt.config.order_branch = true;
	//gantt.config.order_branch_free = true;
	gantt.config.branch_loading = true;

	




	gantt.init("gantt_here");
	//gantt.parse(demo_tasks);
	
	gantt.load('http://localhost:9090/api/aps/getScheduling');

	gantt.attachEvent("onTaskCreated", function(task){
		//alert('onTaskCreated');
		//task.userId = currentUser;
		return true;
	});

	gantt.attachEvent("onBeforeBranchLoading", function(settings){
		//alert('onBeforeBranchLoading')
		//alert(JSON.stringify(settings));
		//var task = gantt.getTask(settings.taskId);
		//config.url += "&value=" + encodeURIComponent(task.text);
		return true;
	});
	
	/*var dp = gantt.createDataProcessor({
	  url: "http://localhost:9090/api/test/getTaskList",
	  mode:"REST-JSON",
	  headers: {
		"Content-Type": "application/json",
		"token": "AwnR8df32d9UTy/Q6hnuWFAeJTjoHjRpjZL37GHLidbxdC5CGP3z4LhBpoCizsyRRKxdeeOa5DUVNJlomUOSqKcJNcAbk+PUT+vUbnWlKY8="
	  }
	});
	dp.init(gantt);

	dp.attachEvent("onBeforeUpdate", function(id, state, data){
		alert('onBeforeUpdate');
		//data.projectId = "1";
		return true;
	});
	
	
	dp.attachEvent("onAfterUpdate", function(id, action, tid, response){
		alert('onAfterUpdate');
		if(action == "error"){
			// do something here
		}
	});*/
	
	//双击事件
	gantt.attachEvent("onTaskDblClick", function(id,e){
		//any custom logic here
		return true;
	});
	
	
	
	//右击甘特图事件 04_customization/10_context_menu.html
	gantt.attachEvent("onContextMenu", function (taskId, linkId, event) {
		var element = event.target;

		return true;
	});

	
	//单击左边的菜单事件
	gantt.attachEvent("onTaskRowClick", function(id, row){
		
		//any custom logic here
	});
	
	//单击标题事件
	gantt.attachEvent("onGridHeaderClick", function(name, e){
		//any custom logic here
		alert('sdsd');
		return true;
	});
	
	gantt.attachEvent("onTaskClick", function(id,e){
		//any custom logic here
		return true;
	});






	
	function zoomIn(){
		gantt.ext.zoom.zoomIn();
	}
	function zoomOut(){
		gantt.ext.zoom.zoomOut()
	}

	var radios = document.getElementsByName("scale");
	for (var i = 0; i < radios.length; i++) {
		radios[i].onclick = function (event) {
			gantt.ext.zoom.setLevel(event.target.value);
		};
	}
	
	function convertDateFromString(dateString) {
		if (dateString) { 
			var date = new Date(dateString.replace(/-/,"/")) 
			return date;
		}
	}
	
	function submitTask(){
	

	}
	
	function getTask(){
		
		gantt.parse(demo_tasks);
		gantt.open("1");
		
	}
	
	function openGantt(){
		gantt.open("1");
	}
	
	function closeGantt(){
		gantt.close("1");
	}
	
	
	
	//https://blog.csdn.net/CX_silent/article/details/83589451
	//https://docs.dhtmlx.com/gantt/desktop__tree_column.html
	//https://blog.csdn.net/qq_24472595/article/details/81630117?utm_source=blogxgwz1
	//https://docs.dhtmlx.com/gantt/desktop__server_side.html
	//https://docs.dhtmlx.com/gantt/samples/02_extensions/06_dynamic_loading.html
	//https://docs.dhtmlx.com/gantt/api__gantt_addtask.html 添加任务
	//https://docs.dhtmlx.com/gantt/api__gantt_autoschedule.html 自动排程
	//https://docs.dhtmlx.com/gantt/api__refs__gantt.html 官方文档
	//https://docs.dhtmlx.com/gantt/api__refs__gantt_events.html 事件
	//https://blog.csdn.net/Marksunshine/article/details/83867862
	
	/*data - 定义甘特图中的任务 
	  　id - (string, number)任务id 
	  　start_date - (Date)任务开始日期 
	  　text - (string)任务描述 
	  　progress - (number) 任务完成度，0到1 
	  　duration - (number) 在当前时间刻度下的任务持续周期 
	  　parent - (number) 父任务的id 
	  links - 定义甘特图中的任务关联线 
	  　id - (string, number) 关联线id 
	  　source - (number) 数据源任务的id 
	  　target - (number) 目标源任务的id 
	  　type - (number) 关联线类型：0 - “结束到开始”，1 - “开始到开始”，2 - “结束到结束” */
	  
	  //ontask事件如何指定tree触发还是甘特图触发？

</script>
